@import '_var.scss';

.container{
    @include index-wh;
    background: url(../images/bg.png) no-repeat;
    background-size: contain;
    position: relative;
    .logo{
        @include wh(1.03rem,.38rem);
        background: url(../images/logo.png) no-repeat;
        background-size: contain;
        @include position($t:.45rem,$l:.45rem);
    }
    .title{
        @include position($t:1.6rem);
        @include wh(5.8rem,3.1rem);
        @include center;
        @for $i from 1 to 5{
            .t#{$i}{
                background: url(../images/title#{$i}.png) no-repeat center;
                background-size: contain;
            }
        }
        .t1{
            height: .71rem;
        }
        .t2{
            height: 1.57rem;
        }
        .t3{
            height: 0.62rem;
        }
        .t4{
            height: 0.29rem;
        }
    }
    @for $i from 1 to 6{
        .cloud#{$i}{
            background: url(../images/cloud#{$i}.png) no-repeat;
            background-size: contain;
        }
    }
    .cloud1{
        @include wh(.77rem,.56rem);
        @include position($t:4rem,$l:.4rem);
    }
    .cloud2{
        @include wh(.43rem,.32rem);
        @include position($t:5.45rem,$r:1.4rem);
    }
    .cloud3{
        @include wh(.43rem,.42rem);
        @include position($t:4.35rem,$r:.6rem);
    }
    .cloud4{
        @include wh(.59rem,.44rem);
        @include position($t:6.1rem,$r:.47rem);
    }
    .cloud5{
        @include wh(.34rem,.25rem);
        @include position($t:6.35rem,$r:1.3rem);
    }
    .moon{
        @include wh(.65rem,.65rem);
        @include position($t:5.6rem,$r:1.15rem);
        background: url(../images/moon.png) no-repeat;
        background-size: contain;
        box-shadow:0 0 .9rem .4rem #61cedb;
        border-radius: 50%;        
    }
    .person{
        @include wh(3.39rem,4.21rem);
        @include position($t:5.7rem);
        @include center;
        background: url(../images/person.png) no-repeat;
        background-size: contain;
        @for $i from 1 to 5{
            .dis#{$i}{
                background: url(../images/dis#{$i}.png) no-repeat;
                background-size: contain;
            }
        }
        .dis1{
            @include wh(.94rem,.69rem);
            @include position($t:0.8rem,$l:-1.1rem);
        }
        .dis2{
            @include wh(1.48rem,.82rem);
            @include position($t:.88rem,$l:2.87rem);
        }
        .dis3{
            @include wh(.94rem,.57rem);
            @include position($t:3.17rem,$l:3.3rem);
        }
        .dis4{
            @include wh(1.28rem,.78rem);
            @include position($t:3.3rem,$l:-1.06rem);
        }
    }
    .button{
        @include wh(1.71rem,.7rem);
        @include position($t:10rem);
        @include center;
        background: url(../images/button-start.png) no-repeat;
        background-size: contain;
        a{
            display: block;
            @include wh(1.71rem,.7rem);
        }
    }
}
